<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件参数传递</title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 父组件向子组件传递参数是一个单项数据流，
        即允许父组件向子组件传递修改的参数，
        而不允许子组件直接去修改父组件传过来的参数。
         如果需要修改以及使用，则复制一份
     -->
    <div id="app">
        <counter :count="0" @inc="increaseHandle"></counter>
        <counter :count="1" @inc="increaseHandle"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        var counter = {
            props : ['count'],
            template : "<div @click='handleClick'>{{number}}</div>",
            data : function(){
              return {
                  number : this.count
              }
            },
            methods : {
                handleClick : function(){
                    this.number  = this.number + 2
                    this.$emit("inc", 2)
                }
            }
        }

        var vm = new Vue({
            el : "#app" ,
            components : {
                counter : counter
            },
            data : {
                total : 1
            },
            methods : {
                increaseHandle : function (step) {
                    this.total = this.total + step ;
                }
            }
        }) ;
    </script>
</body>
</html>